<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Form support</title>


    <script src="%VITE_BUNDLE_PATH%" type="module"></script>


    <link rel="stylesheet" type="text/css" href="./styles/FormSupport.css">
</head>

<body class="formsupport1auto">
    <form method="get">
        <ui5-title>ui5-checkbox</ui5-title>
        <ui5-checkbox id="cb1" text="ui5-checkbox without name"></ui5-checkbox>
        <ui5-checkbox id="cb2" text="ui5-checkbox without name and value" checked></ui5-checkbox>
        <ui5-checkbox id="cb3" name="checkbox3" text="ui5-checkbox with name and without value"></ui5-checkbox>
        <ui5-checkbox id="cb4" name="checkbox4" checked text="ui5-checkbox with name and value"></ui5-checkbox>
        <ui5-checkbox id="cb5" name="checkbox5" required
            text="ui5-checkbox with name, value and required"></ui5-checkbox>
        <ui5-button id="cb_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-color-picker</ui5-title>
        <ui5-color-picker id="color_picker1"></ui5-color-picker>
        <ui5-color-picker id="color_picker2" value="blue"></ui5-color-picker>
        <ui5-color-picker id="color_picker3" name="color_picker3"></ui5-color-picker>
        <ui5-color-picker id="color_picker4" name="color_picker4" value="blue"></ui5-color-picker>
        <ui5-button id="color_picker_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-combobox</ui5-title>
        <ui5-combobox id="combobox1"></ui5-combobox>
        <ui5-combobox id="combobox2" value="ok"></ui5-combobox>
        <ui5-combobox id="combobox3" name="combobox3"></ui5-combobox>
        <ui5-combobox id="combobox4" name="combobox4" value="ok"></ui5-combobox>
        <ui5-combobox id="combobox5" name="combobox5" required></ui5-combobox>
        <ui5-button id="combobox_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-date-picker</ui5-title>
        <ui5-date-picker id="date_picker1"></ui5-date-picker>
        <ui5-date-picker id="date_picker2" value="ok"></ui5-date-picker>
        <ui5-date-picker id="date_picker3" name="date_picker3"></ui5-date-picker>
        <ui5-date-picker id="date_picker4" name="date_picker4" value="ok"></ui5-date-picker>
        <ui5-date-picker id="date_picker5" name="date_picker5" required></ui5-date-picker>
        <ui5-button id="date_picker_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-daterange-picker</ui5-title>
        <ui5-daterange-picker id="daterange_picker1"></ui5-daterange-picker>
        <ui5-daterange-picker id="daterange_picker2" value="ok"></ui5-daterange-picker>
        <ui5-daterange-picker id="daterange_picker3" name="daterange_picker3"></ui5-daterange-picker>
        <ui5-daterange-picker id="daterange_picker4" name="daterange_picker4" value="ok"></ui5-daterange-picker>
        <ui5-daterange-picker id="daterange_picker5" name="daterange_picker5" required></ui5-daterange-picker>
        <ui5-button id="daterange_picker_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-datetime-picker</ui5-title>
        <ui5-datetime-picker id="datetime_picker1"></ui5-datetime-picker>
        <ui5-datetime-picker id="datetime_picker2" value="ok"></ui5-datetime-picker>
        <ui5-datetime-picker id="datetime_picker3" name="datetime_picker3"></ui5-datetime-picker>
        <ui5-datetime-picker id="datetime_picker4" name="datetime_picker4" value="ok"></ui5-datetime-picker>
        <ui5-datetime-picker id="datetime_picker5" name="datetime_picker5" required></ui5-datetime-picker>
        <ui5-button id="datetime_picker_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-file-uploader</ui5-title>
        <!-- <ui5-file-uploader id="file_uploader1"></ui5-file-uploader>
        <ui5-file-uploader id="file_uploader2" value="&quot;Screenshot 2024-04-09 at 12.26.53.png&quot; "></ui5-file-uploader>
        <ui5-file-uploader id="file_uploader3" name="file_uploader3"></ui5-file-uploader>
        <ui5-file-uploader id="file_uploader4" name="file_uploader4" value="&quot;Screenshot 2024-04-09 at 12.26.53.png&quot;"></ui5-file-uploader>
        <ui5-button id="file_uploader_btn1" submits>Submits form</ui5-button> -->
    </form>
    <form method="get">
        <ui5-title>ui5-input</ui5-title>
        <ui5-input id="input1"></ui5-input>
        <ui5-input id="input2" value="ok"></ui5-input>
        <ui5-input id="input3" name="input3"></ui5-input>
        <ui5-input id="input4" name="input4" value="ok"></ui5-input>
        <ui5-input id="input5" name="input5" required></ui5-input>
        <ui5-button id="input_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-multi-combobox</ui5-title>
        <ui5-multi-combobox id="multi_combobox1"></ui5-multi-combobox>
        <ui5-multi-combobox id="multi_combobox2" value="ok"></ui5-multi-combobox>
        <ui5-multi-combobox id="multi_combobox3">
            <ui5-mcb-item selected text="ok"></ui5-mcb-item>
        </ui5-multi-combobox>
        <ui5-multi-combobox id="multi_combobox4" value="ok">
            <ui5-mcb-item selected text="ok"></ui5-mcb-item>
        </ui5-multi-combobox>


        <ui5-multi-combobox id="multi_combobox5" name="multi_combobox5"></ui5-multi-combobox>
        <ui5-multi-combobox id="multi_combobox6" name="multi_combobox6" value="ok"></ui5-multi-combobox>
        <ui5-multi-combobox id="multi_combobox7" name="multi_combobox7">
            <ui5-mcb-item selected text="ok"></ui5-mcb-item>
        </ui5-multi-combobox>
        <ui5-multi-combobox id="multi_combobox8" name="multi_combobox8" value="ok">
            <ui5-mcb-item selected text="ok"></ui5-mcb-item>
        </ui5-multi-combobox>

        <ui5-multi-combobox id="multi_combobox9" no-validation required
            name="multi_combobox9"></ui5-multi-combobox>
        <ui5-multi-combobox id="multi_combobox10" required name="multi_combobox10" value="ok"></ui5-multi-combobox>
        <ui5-multi-combobox id="multi_combobox11" required name="multi_combobox11">
            <ui5-mcb-item selected text="ok"></ui5-mcb-item>
        </ui5-multi-combobox>
        <ui5-multi-combobox id="multi_combobox12" required name="multi_combobox12" value="ok">
            <ui5-mcb-item selected text="ok"></ui5-mcb-item>
        </ui5-multi-combobox>
        <ui5-button id="multi_combobox_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-multi-input</ui5-title>
        <ui5-multi-input id="multi_input1"></ui5-multi-input>
        <ui5-multi-input id="multi_input2" value="ok"></ui5-multi-input>
        <ui5-multi-input id="multi_input3">
            <ui5-token slot="tokens" text="ok"></ui5-token>
        </ui5-multi-input>
        <ui5-multi-input id="multi_input4" value="ok">
            <ui5-token slot="tokens" text="ok"></ui5-token>
        </ui5-multi-input>
        <ui5-multi-input id="multi_input5" name="multi_input5"></ui5-multi-input>
        <ui5-multi-input id="multi_input6" name="multi_input6" value="ok"></ui5-multi-input>
        <ui5-multi-input id="multi_input7" name="multi_input7">
            <ui5-token slot="tokens" text="ok"></ui5-token>
        </ui5-multi-input>
        <ui5-multi-input id="multi_input8" name="multi_input8" value="ok">
            <ui5-token slot="tokens" text="ok"></ui5-token>
        </ui5-multi-input>

        <ui5-multi-input id="multi_input9" allow-custom-values required name="multi_input9"></ui5-multi-input>
        <ui5-multi-input id="multi_input10" required name="multi_input10" value="ok"></ui5-multi-input>
        <ui5-multi-input id="multi_input11" required name="multi_input11">
            <ui5-token slot="tokens" text="ok"></ui5-token>
        </ui5-multi-input>
        <ui5-multi-input id="multi_input12" required name="multi_input12" value="ok">
            <ui5-token slot="tokens" text="ok"></ui5-token>
        </ui5-multi-input>
        <ui5-button id="multi_input_btn1" submits>Submits form</ui5-button>
    </form>
    <form id="myForm" method="get">
        <ui5-title>ui5-tokenizer</ui5-title>
        <ui5-tokenizer id="tokenizeraa" name="tokenizer1">
            <ui5-token text="Token 1"></ui5-token>
            <ui5-token text="Token 2"></ui5-token>
            <ui5-token text="Token 3"></ui5-token>
        </ui5-tokenizer>
        <ui5-button id="tokenizer_submits_form" submits>Submits form</ui5-button>
    </form>
    <form>
        <ui5-title>ui5-radio-button</ui5-title>
        <ui5-radio-button id="rb_1" required name="rb1"></ui5-radio-button>
        <ui5-button id="rb_btn1" submits>Submits form</ui5-button>
    </form>
    <form>
        <ui5-title>ui5-radio-button</ui5-title>
        <ui5-radio-button required id="rb_2" required checked></ui5-radio-button>
        <ui5-button id="rb_btn2" submits>Submits form</ui5-button>
    </form>
    <form>
        <ui5-title>ui5-radio-button</ui5-title>
        <ui5-radio-button required name="rb3" id="rb_3" value="A" text="A"></ui5-radio-button>
        <ui5-radio-button required name="rb3" id="rb_4" value="B" text="B"></ui5-radio-button>
        <ui5-radio-button required value="C" text="C" checked></ui5-radio-button>
        <ui5-button id="rb_btn3" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-range-slider</ui5-title>
        <ui5-range-slider id="range_slider1"></ui5-range-slider>
        <ui5-range-slider id="range_slider2" start-value="25" end-value="75"></ui5-range-slider>
        <ui5-range-slider id="range_slider3" name="range_slider3"></ui5-range-slider>
        <ui5-range-slider id="range_slider4" name="range_slider4" start-value="25" end-value="75"></ui5-range-slider>
        <ui5-button id="range_slider_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-select</ui5-title>
        <ui5-select id="select1">
            <ui5-option selected>Option 1</ui5-option>
            <ui5-option value="option2">Option 2</ui5-option>
            <ui5-option value="">Option 3</ui5-option>
        </ui5-select>
        <ui5-select id="select2">
            <ui5-option>Option 1</ui5-option>
            <ui5-option value="option2" selected>Option 2</ui5-option>
            <ui5-option value="">Option 3</ui5-option>
        </ui5-select>
        <ui5-select id="select3">
            <ui5-option>Option 1</ui5-option>
            <ui5-option value="option2">Option 2</ui5-option>
            <ui5-option value="" selected>Option 3</ui5-option>
        </ui5-select>

        <ui5-select id="select4" name="select4">
            <ui5-option selected>Option 1</ui5-option>
            <ui5-option value="option2">Option 2</ui5-option>
            <ui5-option value="">Option 3</ui5-option>
        </ui5-select>
        <ui5-select id="select5" name="select5">
            <ui5-option>Option 1</ui5-option>
            <ui5-option value="option2" selected>Option 2</ui5-option>
            <ui5-option value="">Option 3</ui5-option>
        </ui5-select>
        <ui5-select id="select6" name="select6">
            <ui5-option>Option 1</ui5-option>
            <ui5-option value="option2">Option 2</ui5-option>
            <ui5-option value="" selected>Option 3</ui5-option>
        </ui5-select>

        <ui5-select id="select7" name="select7" required>
            <ui5-option selected>Option 1</ui5-option>
            <ui5-option value="option2">Option 2</ui5-option>
            <ui5-option value="">Option 3</ui5-option>
        </ui5-select>
        <ui5-select id="select8" name="select8" required>
            <ui5-option>Option 1</ui5-option>
            <ui5-option value="option2" selected>Option 2</ui5-option>
            <ui5-option value="">Option 3</ui5-option>
        </ui5-select>
        <ui5-select id="select9" name="select9" required>
            <ui5-option>Option 1</ui5-option>
            <ui5-option value="option2">Option 2</ui5-option>
            <ui5-option value="" selected>Option 3</ui5-option>
        </ui5-select>

        <ui5-button id="select_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-slider</ui5-title>
        <ui5-slider id="slider1"></ui5-slider>
        <ui5-slider id="slider2" value="100"></ui5-slider>
        <ui5-slider id="slider3" name="slider3"></ui5-slider>
        <ui5-slider id="slider4" name="slider4" value="100"></ui5-slider>
        <ui5-button id="slider_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-step-input</ui5-title>
        <ui5-step-input id="step_input1"></ui5-step-input>
        <ui5-step-input id="step_input2" value="4"></ui5-step-input>
        <ui5-step-input id="step_input3" name="step_input3"></ui5-step-input>
        <ui5-step-input id="step_input4" name="step_input4" value="4"></ui5-step-input>
        <ui5-button id="step_input_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-switch</ui5-title>
        <ui5-switch id="switch1" text="ui5-switch without name"></ui5-switch>
        <ui5-switch id="switch2" text="ui5-switch without name and value" checked></ui5-switch>
        <ui5-switch id="switch3" name="switch3" text="ui5-switch with name and without value"></ui5-switch>
        <ui5-switch id="switch4" name="switch4" checked text="ui5-switch with name and value"></ui5-switch>
        <ui5-switch id="switch4" name="switch4" checked value="test" text="ui5-switch with name and value"></ui5-switch>
        <ui5-switch id="switch5" name="switch5" required text="ui5-switch with name, value and required"></ui5-switch>
        <ui5-button id="switch_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-textarea</ui5-title>
        <ui5-textarea id="textarea1"></ui5-textarea>
        <ui5-textarea id="textarea2" value="ok"></ui5-textarea>
        <ui5-textarea id="textarea3" name="textarea3"></ui5-textarea>
        <ui5-textarea id="textarea4" name="textarea4" value="ok"></ui5-textarea>
        <ui5-textarea id="textarea5" name="textarea5" required></ui5-textarea>
        <ui5-button id="textarea_btn1" submits>Submits form</ui5-button>
    </form>
    <form method="get">
        <ui5-title>ui5-time-picker</ui5-title>
        <ui5-time-picker id="time_picker1"></ui5-time-picker>
        <ui5-time-picker id="time_picker2" value="1:10:10 PM"></ui5-time-picker>
        <ui5-time-picker id="time_picker3" name="time_picker3" required></ui5-time-picker>
        <ui5-time-picker id="time_picker4" name="time_picker4" value="1:10:10 PM" required></ui5-time-picker>
        <ui5-button id="time_picker_btn1" submits>Submits form</ui5-button>
    </form>


    <form method="get">
        <ui5-input name="input" value="ok"></ui5-input>
        <ui5-input name="input_disabled" disabled value="ok"></ui5-input>
        <ui5-select name="sel">
            <ui5-option value="cozy">Cozy</ui5-option>
            <ui5-option value="compact">Compact</ui5-option>
            <ui5-option value="condensed" selected>Condensed</ui5-option>
        </ui5-select>
        <br><br>
        <ui5-textarea id="ta" name="ta" value="ok"></ui5-textarea>
        <ui5-textarea name="ta_disabled" disabled value="ok"></ui5-textarea>
        <br><br>
        <ui5-date-picker name="dp" value="Apr 10, 2019"></ui5-date-picker>
        <ui5-date-picker name="dp_disabled" disabled value="Apr 10, 2019"></ui5-date-picker>
        <br><br>
        <ui5-checkbox name="cb" checked></ui5-checkbox>
        <ui5-checkbox name="cb_disabled" disabled checked></ui5-checkbox>
        <br><br>
        <ui5-radio-button name="radio" text="A" value="a"></ui5-radio-button>
        <ui5-radio-button name="radio" text="B" value="b" checked></ui5-radio-button>
        <ui5-radio-button name="radio" text="C" value="c"></ui5-radio-button>
        <br><br>
        <ui5-step-input class="formsupport2auto" name="si" value="5" min="0" max="10" step="1"></ui5-step-input>
        <ui5-step-input class="formsupport2auto" name="si_diabled" value="7" min="0" max="10" step="1"
            disabled></ui5-step-input>
        <br><br>
        <ui5-button id="b1">Does not submit forms</ui5-button>
        <ui5-button id="b2" submits>Submits forms</ui5-button>
    </form>

    <form method="get" id="form">
        <ui5-input name="input" value="notOk"></ui5-input>
        <ui5-button id="b3" submits>Submits forms</ui5-button>
    </form>

    <script>
        const form = document.getElementById("form");

        form.addEventListener("submit", (e) => {
            e.preventDefault();
        })


    </script>

</body>

</html>